<template>
    <div>
        <bookinfo :bookinfo="bookinfo"></bookinfo>
        <div class="comment" v-if="showAddComment">
            <textarea v-model="comment" class="textarea" placeholder="请输入图书短评"></textarea>
            <div class="location">
                地理位置：<switch :checked="location" color="#f94700" @change="getGeo"/>
                <span class="commentText">{{location}}</span>
            </div>
            <div class="phone">
                手机型号：<switch :checked="phone" color="#f94700" @change="getPhone"/>
                <span class="commentText">{{phone}}</span>
            </div>
            <button class="btn" @click="addComment">发表评论</button>
        </div>
        <div class="commentTips" v-else>-没有登录或者已经评论-</div>
        <comment :comment="commentList" v-if="commentList.length"></comment>
        <button open-type="share" class="btn">转发给好友</button>
    </div>
</template>

<script>
import {get ,post ,showModal ,showSuccess} from '@/util'
import Bookinfo from '@/components/bookinfo/bookinfo'
import Comment from '@/components/CommentList/CommentList'
export default {
    components:{
        Bookinfo,
        Comment
    },
    data() {
        return {
            bookid:'',
            bookinfo:{},
            phone:'',
            location:'',
            userinfo:{},
            commentList:[],
        }
    },
    onShareAppMessage(res){
        console.log(res)
    },
    computed: {
        showAddComment() {
            if(!this.userinfo.openId){
                return false
            }
            if(this.commentList.filter(v=>{return v.openid === this.userinfo.openId}).length){
                return false
            }
            return true
        }
    },
    mounted() {
        this.bookid = this.$root.$mp.query.id
        this.getDetail()
        this.getComment()
        this.userinfo = wx.getStorageSync('userinfo')
    },
    methods:{
        async getDetail() {
            const res = await get('/weapp/getDetail',{
                id:this.bookid
            })
            this.bookinfo = res
            wx.setNavigationBarTitle({
                title: this.bookinfo.title
            })
        },
        async getComment() {
            const res = await get('/weapp/commentlist',{
                bookid: this.bookid
            })
            this.commentList = res.msg
            
        },
        getGeo(e) {
            const ak = 'VD4k9Bptqtf9OS6Y9L6rcPQvjVEPvZeL'
            let url = 'http://api.map.baidu.com/geocoder/v2/'
            if(e.target.value){
               wx.getLocation({
                   success:geo=>{
                       wx.request({
                           url,
                           data:{
                            ak,
                            location: `${geo.latitude},${geo.longitude}`,
                            output: 'json'
                           },
                           success: res => {
                               if(res.data.status === 0){
                                   this.location = res.data.result.addressComponent.city
                               }else{
                                   this.location = ('未知地点')
                               }
                           }
                       })
                   }
               })
            }else{
                this.location = ''
            }
        },
        getPhone(e) {
            if(e.target.value){
               const systemInfo = wx.getSystemInfoSync()
               this.phone = systemInfo.model
            }else{
                this.phone = ''
            }
        },
        async addComment() {
            if(!this.comment){
                showModal('评论失败','评论内容不能为空')
                return
            }
            let data = {
                openid:this.userinfo.openId,
                bookid:this.bookid,
                comment:this.comment,
                location:this.location,
                phone:this.phone
            }
            let res = await post('/weapp/addComment',data)
            if(res.msg === 'success') {
                showSuccess('评论成功')
                this.comment = ''
                this.getComment()
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import '~style/varibles'
    .comment
        .commentText
            color $themeColor
        .textarea
            width 100%
            height 200rpx
            background #eee
        .location
            margin 10px 0
    .commentTips
        text-align center
        margin 10px
        font-size 14px
        color #888
</style>
